<template>

	<view>
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" right-text="切换路线" title="丽江之行" @clickLeft="Left"
				@clickRight="showDrawer('showLeft')" />
		</view>
		<view>
			<image src="../../static/10.jpg" style="width: 100%;"></image>
		</view>
		<!-- <uni-section title="我的旅行路线:" type="line" padding>
					<uni-steps :options="list1" :active="active" />
				</uni-section>
				<button type="primary"  style="margin: 30px 10px; width: 100px;" @click="change">下一天</button> -->
		<uni-drawer ref="showLeft" mode="left" :width="220" @change="change($event,'showLeft')">
			<view class="close">
				<!-- <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button> -->
				<text>选择旅行路线</text>
				<uni-list>



					<uni-list-item title="昆明-大理之行" note="2022.7.20" showArrow to="../pathlx/pathlx"
						thumb="../../static/14.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="丽江之行" note="2022.7.21" showArrow to="../pathlxx/pathlxx"
						thumb="../../static/11.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="大理之行" note="2022.7.22" showArrow to="../pathlx/pathlx"
						thumb="../../static/12.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="香格里拉之行" note="2022.7.24" showArrow to="../pathlxx/pathlxx"
						thumb="../../static/13.gif" thumb-size="base" rightText="切换" />

				</uni-list>
			</view>
		</uni-drawer>

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
			<view v-if="current === 1">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
			<view v-if="current === 2">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
		</view>

		<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
			@buttonClick="buttonClick" />

	</view>
</template>

<script>
	export default {
		data() {
			return {

				// active: 1,
				// 				list1: [{
				// 					title: '第一天'
				// 				}, {
				// 					title: '第二天'
				// 				}, {
				// 					title: '第三天'
				// 				}, {
				// 					title: '第四天'
				// 				}],
				items: ['第一天', '第二天', '第三天'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				active: 1,
				list2: [{
					title: '丽江古城',
					desc: '建议游玩三个小时'
				}, {
					title: '拉市海',
					desc: '白天天气较热，建议游玩两个小时'
				}, {
					title: '玫瑰庄园',
					desc: '拍照爱好者聚集地，建议游玩三个小时'
				}, {
					title: '束河古镇',
					desc: '白族风情古镇，老舍曾经游玩过的地方'
				}, {
					title: '大理古城',
					desc: '建议游玩三个小时'
				}, {
					title: '洱海',
					desc: '白天天气较热，建议游玩两个小时'
				}, {
					title: '大理花海',
					desc: '拍照爱好者聚集地，建议游玩三个小时'
				}, {
					title: '喜洲古镇',
					desc: '白族风情古镇，老舍曾经游玩过的地方'
				}, {
					title: '大理古城',
					desc: '建议游玩三个小时'
				}, {
					title: '洱海',
					desc: '白天天气 较热，建议游玩两个小时'
				}, {
					title: '大理花海',
					desc: '拍照爱好者聚集地，建议游玩三个小时'
				}, {
					title: '喜洲古镇',
					desc: '白族风情古镇，老舍曾经游玩过的地方'
				}],
				showRight: false,
				showLeft: false,
				options: [{
					icon: 'compose',
					text: '编辑'
				}, {
					icon: 'redo',
					text: '分享',

					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'heart',
					text: '喜欢',

				}],
				customButtonGroup: [{
					text: '行程打卡',
					backgroundColor: 'linear-gradient(90deg, #ffffff, #088FEB)',
					color: '#fff'
				}],

			}

		},
		methods: {
			changeArea() {
				if (this.active < this.list2.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			Left() {
				uni.navigateBack({
					url: "../path/path"
				})
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}

		}


	}
</script>

<style>
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		/* height: 600px; */
		text-align: center;
		background-color: #ffffff;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.uni-common-mt {
		margin-top: 30px;
		/* background-color: #ffffff; */
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
		/* background-color: #ffffff; */
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}
</style>
